<template>
	<view class="classList">
		<view class="list-content">
			<navigator :url="'/pages/Preview/Preview?id='+item._id" class="item" v-for="item in wallpaperList" :key="item._id">
				<image :src="item.smallPicurl" mode="aspectFill"></image>
			</navigator>
			<uni-load-more class="loader" :status=" hasMoreData? 'loading' :' noMore' "></uni-load-more>

			<!-- <navigator url="/pages/Preview/Preview" class="item" v-for="i in 4">
				<image class="img" src="../../common/images/wallpaper/preview2.jpg" mode="aspectFill"></image>
			</navigator> -->
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue';
import {onLoad,onReachBottom} from"@dcloudio/uni-app"
import {apiGetWallpaperList} from "@/apis.js"
	defineProps({
		title:{
			type:String,
			default:"匿名"
		}
	})
	var hasMoreData=ref(true);
	var wallpaperList=ref([]);
	var queryParams={
		pageNum:1
	};
	onLoad(e=>{
		// console.log(e);
		queryParams.classid=e.classid;
		queryParams.pageSize=e.pageSize;
		uni.setNavigationBarTitle({
			title:e.className
		})
		getWallpaperList();
	})
	onReachBottom(()=>{
		getWallpaperList();
	})
	async function getWallpaperList(){
		var Data=await apiGetWallpaperList({
			"classid":queryParams.classid,
			"pageSize":5,
			"pageNum":queryParams.pageNum++
		});
		if(Data.data.data.length==0)	hasMoreData.value=false;
		wallpaperList.value.push(...Data.data.data);
		uni.setStorageSync("StorageWallpaperList",wallpaperList.value);
	}
	
	
</script>

<style lang="scss" scoped>
	.classList{
		padding: 5rpx;
		.list-content{
			display: grid;
			grid-template-columns: repeat(3,1fr);
			gap: 5rpx;
			.item{
				height: 440rpx;
				.img{
					width: 100%;
					height: 440rpx;
				}
			}
		}
		.loader{
			margin-bottom: 5000rpx;
		}
	}
	
</style>
